<script>
/*
 * @Author: Your name
 * @Date:   2020-06-27 17:27:49
 * @Last Modified by:   Your name
 * @Last Modified time: 2020-07-04 00:07:25
 */
</script>
<template>
  <div id="goodsItem" @click="getDetail">
    <img :src="goodsItem.image" alt="" @load="imgLoad"/>
    <div class="container">
        <p>{{ goodsItem.title }}</p>
        <div class="goodsMes">
            <span class="price">￥{{ goodsItem.price }}</span>
            <span class="star">{{ goodsItem.star }}</span>
        </div>
    </div>
    
  </div>
</template>
<script>
export default {
  data(){
    return {
      detailId:this.goodsItem.id
    }
  },
  props: {
    goodsItem: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  methods:{
    //监听图片的加载，利用@load属性
    imgLoad(){
      // console.log('图片加载了');
      //通过事件总线用emit发送一个函数，然后再需要用的地方(home.vue)通过this.$bus.$on()接收
      this.$bus.$emit('itemImageLoad');
    },
    getDetail(){
      // console.log(this.goodsItem.id)
      this.$router.push('/detail/' + this.goodsItem.id);
    }
  }
};
</script>
<style lang="css">
    #goodsItem{
        width: 48%;
    }
    #goodsItem img{
        width: 100%;
        border-radius: 5px;
    }
    .container{
        padding: 0 5px;
    }
    #goodsItem p{
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 13px;
        line-height: 24px;
    }
    #goodsItem .goodsMes{
        display: flex;
        justify-content: space-between;
    }
    #goodsItem .price{
        color: var(--color-high-text);
        margin-right: 20px;
    }
    #goodsItem .star{
        position: relative;
    }
    #goodsItem .star::before{
        content: '';
        position: absolute;
        left: -15px;
        top: 0px;
        width: 14px;
        height: 14px;
        background: url("../../../assets/img/common/collect.svg") 0 0/14px 14px;
    }

</style>
